<template>
  <div class="box">
    <!-- logo -->
    <div class="logo">
      <img
        src="https://award.xmcdn.com/yx/fe-passport/last/dist/images/new-logo-m@2x_2909eca.png"
        alt=""
        style="width:177px;"
      />
    </div>

    <!-- 验证码和密码登录 -->
    <div class="register">
      <van-tabs line-width="155px" color="#f86442" title-active-color="#f86442" @click-tab="onClick">
        <van-tab title="验证码登录"></van-tab>
        <van-tab title="密码登录"></van-tab>
      </van-tabs>
    </div>

    <!-- 手机号输入 -->
    <div class="login">
      <div class="phone">
        <div class="left">
          <div class="area-code">+86</div>
          <div class="icon">
            <svg
              t="1692785262300"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4023"
              width="14"
              height="14"
            >
              <path
                d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z"
                p-id="4024"
                fill="#2c2c2c"
              ></path>
            </svg>
          </div>
        </div>
        <div class="right">
          <el-input  v-model="phone" placeholder="请输入手机号" clearable />
        </div>
      </div>
    </div>

    <!-- 密码输入 -->
    <div v-if="showPassword" class="password">
      <el-input v-model="password" placeholder="请输入密码" type="password" clearable></el-input>
    </div>

    <!-- 登录按钮 -->
    <Button @click="login" class="btn" size="large" color="#e8e8e8" round>登录</Button>

    <!-- 邮箱登录 -->
    <p class="email">邮箱登录</p>

    <!-- 用户协议 -->
    <div class="agree">
      <el-checkbox size="large" v-model="agreement" />
      <span class="span">首次登录会自动创建新账号,且代表同意</span>
      <a href="#" class="em">《用户服务协议》</a>
      <span class="span">和</span>
      <a href="#" class="em">《隐私政策》</a>
    </div>

    <!-- 其他登录方式 -->
    <div class="other">
      <el-divider><span class="line">其他登录方式</span></el-divider>
      <div class="bottom">
        <svg
          t="1704804542616"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5876"
          width="48"
          height="48"
        >
          <path
            d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m210.385455 641.396364c-7.447273 9.309091-26.996364-1.861818-41.89091-32.581819-3.723636 13.963636-13.032727 36.305455-34.443636 64.232728 35.374545 8.378182 44.683636 42.821818 33.512727 61.44-8.378182 13.032727-26.996364 24.203636-59.578181 24.203636-58.647273 0-83.781818-15.825455-95.883637-26.996364-1.861818-2.792727-5.585455-3.723636-10.24-3.723636-4.654545 0-7.447273 0.930909-10.24 3.723636-11.170909 11.170909-37.236364 26.996364-95.883636 26.996364-32.581818 0-52.130909-11.170909-59.578182-24.203636-12.101818-18.618182-1.861818-53.061818 33.512727-61.44-20.48-27.927273-29.789091-50.269091-34.443636-64.232728-13.963636 30.72-34.443636 42.821818-41.890909 32.581819-5.585455-8.378182-8.378182-26.065455-7.447273-38.167273 3.723636-46.545455 34.443636-85.643636 53.061818-106.123636-2.792727-5.585455-8.378182-40.029091 14.894546-63.301819v-1.861818c0-92.16 65.163636-158.254545 148.014545-158.254545 81.92 0 148.014545 66.094545 148.014546 158.254545v1.861818c23.272727 23.272727 17.687273 57.716364 14.894545 63.301819 17.687273 20.48 49.338182 59.578182 53.061818 106.123636 0.930909 12.101818-0.930909 29.789091-7.447272 38.167273z"
            fill="#30A5DD"
            p-id="5877"
          ></path>
        </svg>
        <svg
          t="1704804610515"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7841"
          width="48"
          height="48"
        >
          <path
            d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m-60.80512-724.992c-81.55136 0-294.74816 181.6576-294.74816 296.7552s142.35648 208.2816 317.952 208.2816 316.60032-93.184 316.60032-208.2816c0-97.28-119.86944-97.28-119.86944-103.424s59.6992-62.8736 0-97.8944-168.83712 18.2272-165.5808 12.4928c46.96064-81.92-20.1728-107.9296-54.35392-107.9296z m273.08032 79.0528c19.7632 23.9616 4.28032 62.464 4.28032 62.464a10.40384 10.40384 0 0 0 10.58816 14.1312h13.49632a18.432 18.432 0 0 0 17.5104-14.7456s15.89248-61.8496-21.17632-95.6416a98.79552 98.79552 0 0 0-85.48352-21.504 17.75616 17.75616 0 0 0-14.72512 16.9984v5.9392a14.15168 14.15168 0 0 0 15.07328 14.1312s40.6528-5.5296 60.43648 18.2272z m93.9008-101.5808c-67.95264-65.3312-167.71072-56.1152-167.71072-56.1152a22.77376 22.77376 0 0 0-22.20032 22.7328v11.0592a21.52448 21.52448 0 0 0 22.528 21.504s95.744-10.24 136.51968 49.3568a185.36448 185.36448 0 0 1 23.1424 133.9392 18.67776 18.67776 0 0 0 19.0464 22.1184h9.5232a25.76384 25.76384 0 0 0 25.16992-22.1184s21.93408-117.3504-46.01856-182.4768z m-150.89664 301.2608c10.42432 73.9328-72.0896 146.8416-184.32 162.6112s-211.5584-31.5392-221.96224-105.6768 72.0896-146.8416 184.32-162.6112 211.5584 31.5392 221.96224 105.6768z m-104.05888 16.5888c-10.97728-56.5248-73.97376-91.7504-140.6976-78.6432s-111.9232 69.2224-100.94592 125.7472 73.97376 91.7504 140.6976 78.6432 111.9232-69.2224 100.92544-125.7472z m-99.08224 22.3232a20.8896 20.8896 0 1 1 20.48-20.8896 20.74624 20.74624 0 0 1-20.48 20.8896z m-47.104 47.5136a32.44032 32.44032 0 1 1-26.39872-56.7296 32.44032 32.44032 0 1 1 26.39872 56.7296z"
            fill="#d81e06"
            p-id="7842"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button, showDialog, } from 'vant';
import { useRouter } from 'vue-router';
import {reqLogin} from '@/api/login/login'
const phone = ref()
const password = ref()
const showPassword = ref(false)
const router = useRouter();

const agreement = ref(false)

// 表单校验

// 登录按钮的回调
const login = async () => {
  if(showPassword.value){
    if(agreement.value){
      if(phone.value && password.value){
        if(phone.value === '13700000000' && password.value === '111111'){
          let result = await reqLogin({phone:phone.value,password:password.value})
        console.log(result);
        localStorage.setItem("TOKEN", result.data.token)
     
        await showDialog({
          message:'登录成功',
        })
        router.go(-1);
        }else{
          showDialog({
            message:'输入账号或者密码有误'
          })
        }
       
      }else{
        showDialog({
          message:'请输入手机号或者密码'
        })
      }
    }else{
      showDialog({
        message:'请确认同意协议'
      })
    }
  }else{
    if(agreement.value){
      if(phone.value){

      }else{
        showDialog({
          message:'请输入正确的手机号'
        })
      }
    }else{
        showDialog({
          message:'请同意用户协议'
        })
      }
  }
}


const onClick = (event:any) => {
  showPassword.value = event.name != 0;
}
</script>

<style scoped lang="less">
.box {
  padding: 31px 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  .logo {
    margin: 0 auto;
  }
  .register{
    width: 100%;
    margin-top: 20px;
  }
  .login{
    width: 100%;
    margin-top: 30px;
    .phone{
      width: 100%;
      display: flex;
      align-content: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #cccccc;
      .left{
        width: 50px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        display: flex;
        align-content: center;
        padding-right: 20px;
        border-right: 1px solid #cccccc;
        .area-code{
          height: 30px;
          line-height: 30px;
          margin-right: 5px;
        }
        .icon{
          height: 30px;
          line-height: 30px;
        }
      }
      .right{
        height: 18px;
        width: 250px;
        border: none;
        //margin-left: 10px;
        font-size: 14px;
        color: #cccccc;
        font-weight: 100;
        box-sizing: border-box;
      }
    }

  }
  .password{
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #cccccc;
  }
  .btn{
    margin-top: 20px;
  }
  .email{
    width: 100%;
    font-size: 12px;
    margin: 15px 0 30px;
    color: #555555;
  }
  .agree{
    width: 100%;
    font-weight: 100;
    text-align: center;
    .span{
      color: #cccccc;
      font-size: 10px;
    }
    .em{
      color: #f86442;
      font-size: 10px;
    }
  }
  .other{
    width: 100%;
    position: absolute;
    bottom: -97px;
    .line{
      color: #cccccc;
      font-size: 12px;
    }
    .bottom{
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 0 100px;
    }
  }

}

// 深度选择器改变样式
:deep( .van-tabs__line) {
  background: red;
}
:deep(.van-tab--active) {
  font-weight: normal;
}
:deep(.el-input__wrapper)  {
  box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
  box-shadow: none;
}
:deep(.el-input__wrapper:focus) {
  box-shadow: none;
}
:deep(.el-checkbox .el-checkbox--large){
  height: 0;
}

:deep(.el-checkbox:last-of-type) {
  margin-right: 8px;
}
:deep( .el-checkbox__inner:hover) {
   border-color: #cccccc;
}
:deep( .el-checkbox.el-checkbox--large .el-checkbox__inner) {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner)  {
  background-color: #f86442;
  border-color: #f86442;
}
</style>
